<!doctype html>
<html>
    <head>
        <!-- meta -->
        <!-- meta -->
        <title>Drag & Drop</title>
        <!-- css -->
        <link href="../styles/examples.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.common.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.css" rel="stylesheet"/>
        <!-- css -->
        <!-- script -->
        <script src="../js/jquery.js"></script>
        <script src="../../source/js/nova.core.js"></script>
        <script src="../../source/js/nova.fx.js"></script>
        <script src="../../source/js/nova.draganddrop.js"></script>
        <script src="../../source/js/nova.treeview.js"></script>
        <!-- script -->
    </head>
    <body>
        <!-- nav -->
        <!-- nav -->
        <!-- description -->
        <!-- description -->
        <div id="example" class="n-content">
            <div id="treeview-left"></div>

            <div id="treeview-right"></div>

            <script>
                $("#treeview-left, #treeview-right").novaTreeView({
                    dragAndDrop: true,
                    dataSource: [
                        { text: "Item 1", expanded: true, items: [
                            { text: "Item 1.1" },
                            { text: "Item 1.2" },
                            { text: "Item 1.3" }
                        ] },
                        { text: "Item 2", items: [
                            { text: "Item 2.1" },
                            { text: "Item 2.2" },
                            { text: "Item 2.3" }
                        ] },
                        { text: "Item 3" }
                    ]
                }).data("novaTreeView");
            </script>

            <style scoped>
                #treeview-left,
                #treeview-right
                {
                    float: left;
                    width: 25%;
                    margin-top: 2em;
                }
            </style>
        </div>
        <!-- tools -->
        <!-- tools -->
    </body>
</html>


